<template>
  <div class="box-card" shadow="never">
    <el-table max-height="600" ref="table" v-loading="crud.loading" :data="crud.data[crud.listName]"
      highlight-current-row @current-change="handleCurrentChange" :header-cell-style="{ background: '#c8e2ff' }">
      <el-table-column :show-overflow-tooltip="true" prop="treatmentName" label="治疗项目" />
      <el-table-column prop="exeInterval" label="执行频率">
        <template slot-scope="scope">
          {{ scope.row.exeInterval
          }}{{ scope.row.dicExeInterval == 1 ? "天" : "" }}
        </template>
      </el-table-column>
      <el-table-column prop="chargeStates" label="收费">
        <template slot-scope="scope">
          <span :class="scope.row.chargeStates == 0 ? 'red' : ''">
            {{
              scope.row.chargeStates == 0
                ? "未收费"
                : scope.row.chargeStates == 1
                  ? "已收费"
                  : ""
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="reservationStates" label="状态">
        <template slot-scope="scope">
          <span :class="scope.row.reservationStates == 1 ? 'green' : ''">
            {{
              scope.row.reservationStates == 0
                ? "未预约"
                : scope.row.reservationStates == 1
                  ? "已预约"
                  : ""
            }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="reservationNum" label="预约次数">
        <template slot-scope="scope">
          {{ scope.row.exePeriod }}/{{ scope.row.periodNum }}/{{
            scope.row.reservationNum
          }}
        </template>
      </el-table-column> -->
      <el-table-column prop="exePeriod" label="疗程">
        <template slot-scope="scope">{{ scope.row.exePeriod }}
        </template>
      </el-table-column>
      <el-table-column prop="periodNum" label="疗程次数">
        <template slot-scope="scope">{{ scope.row.periodNum }}
        </template>
      </el-table-column>
      <el-table-column prop="reservationNum" label="预约次数">
        <template slot-scope="scope">
          {{ scope.row.reservationNum }}
        </template>
      </el-table-column>
    </el-table>
    <pagination :showJumper="true" />
  </div>
</template>

<script>
import crudDict from "@/api/system/dictItem";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
const defaultForm = {
  aid: null,
  patientId: null,
};
export default {
  name: "appItem",
  components: { udOperation, pagination },
  cruds() {
    return CRUD({
      url: "admin/reservation/treatment/list",
      crudMethod: { ...crudDict },
      optShow: {
        reset: false,
        add: false,
        edit: false,
        del: false,
        download: false,
        opts: false,
      },
      queryOnPresenterCreated: false,
      idField: "patientId",
    });
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  props: {
    activeRow: {
      type: Object,
      default: null,
    },
    activeRow2: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      currentRow: null,
      currentRow2: null,
    };
  },
  watch: {
    activeRow: function (val) {
      if (val) {
        this.searchItem(val);
      }
    },
    activeRow2: function (val, oldVal) {
      this.currentRow2 = val;
    },
  },
  methods: {
    setSelectTableRow(val) {
      this.$refs.table.setCurrentRow(val);
    },
    searchItem(val) {
      this.crud.defaultForm.patientId = val ? val.patientId : "";
      this.crud.defaultForm.patientName = val ? val.patientName : "";
      this.crud.params.patientId = val ? val.patientId : "";
      this.crud.params.batchId = val ? val.batchId : "";
      this.crud.toQuery();
    },
    handleCurrentChange(val) {
      this.$emit("change2", val);
    },
    [CRUD.HOOK.afterRefresh](crud) {
      if (crud.data && crud.data.content && crud.data.content.length) {
        if (this.currentRow2) {
          const existRow = crud.data.content.find(
            (row) => row.patientId === this.currentRow2.patientId
          );
          if (!existRow) {
            this.$emit("change2", crud.data.content[0]);
          }
        } else {
          this.$emit("change2", crud.data.content[0]);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-shadow: -3px 0px 5px #00000059;
}

/deep/.crud-opts {
  display: inline-flex;
}

.table_title {
  display: inline-block;
  line-height: 30px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  font-weight: bold;
  color: #303133;
  font-size: 15px;
}

.head-container {
  padding-bottom: 0;

  /deep/.filter-item {
    margin-bottom: 0;
  }
}

.red {
  color: #a30014fe;
}

.green {
  color: #4b7902;
}

/deep/.el-pagination .el-select .el-input .el-input__inner {
  height: 22px;
}
</style>
